<div ng-if="ctrl.tab === 'about' && !ctrl.load">
    <div class="euiPage euiPageBody">
    <!-- App information section -->
    <div ng-if="!ctrl.load">
            <div class="euiCallOut euiCallOut--primary" style="display: flex">
                <div class="wz-text-truncatable" flex>App version: <span
                        class="wz-text-bold">{{ctrl.appInfo["app-version"]}}</span></div>
                <div class="wz-text-truncatable" flex>App revision: <span
                        class="wz-text-bold">{{ctrl.appInfo["revision"]}}</span></div>
                <div class="wz-text-truncatable" flex>Install date: <span
                        class="wz-text-bold">{{ctrl.appInfo["installationDate"] | date : "medium"}}</span></div>
                </div>
    </div>
    <!-- End app information section -->
    <div class="euiSpacer euiSpacer--l"></div>
    <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive">
            <div class="euiFlexItem">
        <div class="euiPanel euiPanel--paddingLarge">
                <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive">
                        <div class="euiFlexItem euiFlexItem--flexGrowZero">
                            <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive">
                                <div class="euiFlexItem">
                                    <h2 class="euiTitle euiTitle--medium">Welcome to the Wazuh app for Kibana {{ctrl.kibanaVersion}}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="euiSpacer euiSpacer--l"></div>
                <div class="euiText euiText--medium">
                    <p>
                    Wazuh Kibana plugin provides management and monitoring capabilities, giving users control
                    over the Wazuh infrastructure. Using this plugin you can monitor your agents status and
                    configuration, query and visualize your alert data and monitor manager rules and
                    configuration.
                </p>
                </div>
            </div>
        </div>
        <div class="euiFlexItem">
            <div class="euiPanel euiPanel--paddingLarge">
                    <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive">
                            <div class="euiFlexItem euiFlexItem--flexGrowZero">
                                <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive">
                                    <div class="euiFlexItem">
                                        <h2 class="euiTitle euiTitle--medium">Community</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="euiSpacer euiSpacer--m"></div>
                <div class="euiText euiText--medium">
                        <p>
                                Enjoy your Wazuh experience and please don't hesitate to give us your feedback.
                    </p>
                </div>
                <div class="euiSpacer euiSpacer--l"></div>
                <div layout="row" class="layout-align-center-center" flex>
                    <react-component name="EuiButtonIcon"
                        props="{iconType:'logoSlack', iconSize:'xxl', href: 'https://wazuh.com/community/join-us-on-slack/', target: '_blank', 'aria-label': 'Wazuh Slack'}" ></react-component>
                    <react-component class="wz-margin-left-16" name="EuiButtonIcon"
                        props="{iconType:'logoGmail', iconSize:'xxl', href: 'https://groups.google.com/forum/#!forum/wazuh', target: '_blank', 'aria-label': 'Wazuh forum'}" ></react-component>
                    <react-component class="wz-margin-left-16" name="EuiButtonIcon"
                        props="{iconType:'logoGithub', iconSize:'xxl', href: 'https://github.com/wazuh/wazuh-kibana-app', target: '_blank', 'aria-label': 'Wazuh app Github'}" ></react-component>

                </div>
            </div>
        </div>
    </div>
</div>
</div>